<template>
  <div class="tool">
    <div :key="item.title" v-for="item in items" class="item" @mousedown="mouseDown(item,$event)">
      <a-icon :type="item.icon" />
      &nbsp;{{item.title}}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        {
          code: "normal",
          title: "普通节点",
          icon: "profile"
        },
        {
          code: "auto",
          title: "自动节点",
          icon: "thunderbolt"
        },
        {
          code: "branch",
          title: "分支节点",
          icon: "share-alt"
        },
        {
          code: "end",
          title: "结束节点",
          icon: "logout"
        }
      ]
    };
  },
  methods: {
    mouseDown(item, event) {
      let target = event.currentTarget;
      let tempDiv = target.cloneNode(true);
      tempDiv.style.position = "absolute";
      tempDiv.style.left = target.offsetLeft - 24 + "px";
      tempDiv.style.top = target.offsetTop + "px";
      tempDiv.style.zIndex = 9;
      target.parentNode.appendChild(tempDiv);
      let disX = event.clientX - tempDiv.offsetLeft;
      let disY = event.clientY - tempDiv.offsetTop;
      this.$root.flow.curField = item;
      let parentDom = document.querySelector("#flowDesign");
      let moveFunc = e => {
        tempDiv.style.left = `${e.clientX - disX}px`;
        tempDiv.style.top = `${e.clientY - disY}px`;
      };
      let upFunc = e => {
        parentDom.removeEventListener("mousemove", moveFunc);
        parentDom.removeEventListener("mouseup", upFunc);
        parentDom.removeEventListener("mouseleave", upFunc);
        target.parentNode.removeChild(tempDiv);
      };
      parentDom.addEventListener("mousemove", moveFunc);
      parentDom.addEventListener("mouseup", upFunc);
      parentDom.addEventListener("mouseleave", upFunc);
    }
  }
};
</script>
<style lang="scss" scoped>
.tool {
  width: 130px;
  box-shadow: 2px 2px 4px 0 rgba(34, 34, 34, 0.1);
  height: 100%;
  overflow-y: auto;
  user-select: none;
  padding-top: 12px;
  .item {
    display: inline-block;
    margin-left: 12px;
    width: 108px;
    height: 36px;
    margin-bottom: 8px;
    line-height: 36px;
    border: 1px solid #ddd;
    border-radius: 2px;
    overflow: hidden;
    text-align: center;
    cursor: move;
  }
  .item:hover {
    background: #e6f7ff;
  }
}
</style>